<template>
  <el-card>
    <el-table
      :data="skuDataListAll"
      style="width: 100%"
      border
      v-loading="loading"
    >
      <el-table-column label="序号" type="index" align="center" />
      <el-table-column prop="skuName" label="名称" width="180" />
      <el-table-column prop="skuDesc" label="描述" width="180" />
      <el-table-column prop="name" label="默认图片" width="180">
        <template v-slot="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.skuDefaultImg"
            fit="fill"
          />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(KG)" width="180" />
      <el-table-column prop="price" label="价格(元)" width="180" />
      <el-table-column prop="address" label="操作">
        <template v-slot="{ row }">
          <el-button
            :type="row.isSale ? 'success' : 'info'"
            size="small"
            :icon="row.isSale ? ArrowDown : ArrowUp"
            @click="saleUpAndCancle(row.isSale, row.id)"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            :icon="Edit"
            @click="editSku"
          ></el-button>
          <el-button
            type="info"
            size="small"
            :icon="InfoFilled"
            @click="skuDetail(row)"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            :icon="Delete"
            @click="deleteSku(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      :page-sizes="[10, 15, 20, 30]"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @size-change="request"
      @current-change="request"
    />
    <el-drawer v-model="drawer" size="50%">
      <div class="wrap">
        <el-row class="row">
          <el-col :span="6" class="title"><span>sku名称</span></el-col>
          <el-col :span="18" class="item"
            ><span>{{ drawData.skuName }}</span></el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="6" class="title"><span>名称</span></el-col>
          <el-col :span="18" class="item"
            ><span>{{ drawData.skuName }}</span></el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="6" class="title"><span>描述</span></el-col>
          <el-col :span="18" class="item"
            ><span>{{ drawData.skuDesc }}</span></el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="6" class="title"><span>价格</span></el-col>
          <el-col :span="18" class="item"
            ><span>{{ drawData.price }}</span></el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="6" class="title"><span>平台属性</span></el-col>
          <el-col :span="18" class="item"
            ><el-tag
              class="tag"
              type="success"
              v-for="(item, index) in drawData.skuAttrValueList"
              :key="index"
              >{{ item.attrName }}-{{ item.valueName }}</el-tag
            ></el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="6" class="title"><span>销售属性</span></el-col>
          <el-col :span="18" class="item"
            ><el-tag
              class="tag"
              type="success"
              v-for="(item, index) in drawData.skuSaleAttrValueList"
              :key="index"
              >{{ item.saleAttrName }}-{{ item.saleAttrValueName }}</el-tag
            ></el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="6" class="title"><span>商品图片</span></el-col>
          <el-col :span="18" class="item">
            <el-carousel :interval="2000" arrow="always" class="carousel">
              <el-carousel-item
                v-for="item in drawData.skuImageList"
                :key="item.id"
              >
                <el-image :src="item.imgUrl" style="width: 100%; height: 400px">
                  <template #error>
                    <div class="image-slot">
                      <el-icon><icon-picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XSku",
};
</script>
<script lang="ts" setup>
import {
  Plus,
  Delete,
  ArrowUp,
  ArrowDown,
  InfoFilled,
  Edit,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type {
  ArraySkuDateType,
  skuDataType,
  drawerType,
} from "@/api/product/model/skuType";
import {
  reqSkuList,
  reqSkuSaleCancle,
  reqSkuSaleUp,
  reqSkuDelete,
  reqSkuItem,
} from "@/api/product/sku";
import { ref, reactive, onMounted } from "vue";
import { Picture as IconPicture } from "@element-plus/icons-vue";
const skuDataListAll = ref<ArraySkuDateType>([] as ArraySkuDateType);
const page = ref(1);
const limit = ref(10);
const total = ref(10);
const loading = ref(false);
async function request() {
  loading.value = true;
  const result = await reqSkuList(page.value, limit.value);
  skuDataListAll.value = result.records;
  total.value = result.total;
  loading.value = false;
}
onMounted(request);
async function saleUpAndCancle(isSale: number, id: number) {
  isSale && (await reqSkuSaleCancle(id));
  !isSale && (await reqSkuSaleUp(id));
  isSale && ElMessage.success("下架成功");
  !isSale && ElMessage.success("上架成功");
  request();
}
async function deleteSku(id: number) {
  await reqSkuDelete(id);
  ElMessage.success("删除sku成功!!!");
  request();
}
async function editSku() {
  ElMessage("功能正在实现中...");
}
/********抽屉 */
const drawer = ref(false);
const drawData = ref<drawerType>({} as drawerType);
async function skuDetail(row: skuDataType) {
  drawer.value = true;
  const result = await reqSkuItem(row.id);
  drawData.value = result;
}

/*************swiper */
</script>

<style lang="less" scoped>
.wrap {
  transform: translateY(-20px);
}
.row:deep(.title) {
  text-align: right;
  font-size: 24px;
}
.row:deep(.item) {
  transform: translateY(5px);
  padding-left: 10px;
}
.row {
  margin-bottom: 10px;
}
.tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
:deep(.el-carousel__indicator) {
  button {
    background-color: pink;
  }
}
.carousel {
  background-color: red;
  width: 400px;
}
</style>
